<template>
  <div class="app-container">
    <div class="filter-container">
    </div>
    <div>
      <el-table
        border
        v-loading="tableloading"
        :data="newEquipmentData"
      >
        <el-table-column
          prop="userId"
          label="用户ID"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="userName"
          label="手机号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="bandingTime"
          :formatter="formatterTime"
          label="新增设备时间"
          width="104"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="hardwareEquipment"
          label="新增设备"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="沟通方式"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="openChangeWay(scope.row)"
            >
              <div
                style="display:inline-block;"
                v-for="(item,index) in scope.row.communicateWay"
                :key="index"
              >
                <span v-if="item == 0">
                  &nbsp;未沟通&nbsp;
                </span>
                <span v-if="item == 1">
                  &nbsp;电话&nbsp;
                </span>
                <span v-if="item == 2">
                  &nbsp;短信&nbsp;
                </span>
                <span v-if="item == 3">
                  &nbsp;微信&nbsp;
                </span>
                <span v-if="item == 4">
                  &nbsp;App推送&nbsp;
                </span>
              </div>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="goMemo(scope.row)"
              type="text"
              size="small"
            >编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="changeHandleAction(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.handleAction == 0"
            >电话跟进</el-button>
            <span v-else>
              已电话
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="修改沟通方式"
      :visible.sync="dialogChangeWay"
      width="50%"
      center
    >
      <span>
        请按照用户的真实意愿勾选下列选项：
      </span>
      <el-form
        :model="changeWayData"
        :rules="rules"
        ref="changeWayData"
      >
        <el-form-item
          :label-width="formLabelWidth"
          prop="checkbox"
        >
          {{changeWayData.checkbox}}
          <el-checkbox-group v-model="changeWayData.checkbox">
            <el-checkbox
              :label="checkbox.label"
              v-for="checkbox in wayCheckbox"
              :key="checkbox.label"
              name="checkbox"
              v-if="checkbox.label !== '4'"
            >{{checkbox.name}} </el-checkbox>
            <el-checkbox
              label="4"
              name="checkbox"
              disabled
            >App推送</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogChangeWay = false">取 消</el-button>
        <el-button
          type="primary"
          @click="doChangeWay('changeWayData')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  fetchAllNewEquipment,
  fetchUserCommunicate,
  fetchHandleAction
} from "@/api/table";
import format from "date-format";

export default {
  data() {
    return {
      count: 0,
      limit: 20,
      currentPage: 1,
      startRmarkTime: "",
      endRmarkTime: "",
      tableloading: false,
      newEquipmentData: [],
      formLabelWidth: "150px",
      dialogChangeWay: false,
      wayCheckbox: [
        {
          name: "电话",
          label: "1"
        },
        {
          name: "短信",
          label: "2"
        },
        {
          name: "微信",
          label: "3"
        },
        {
          name: "App推送",
          label: "4"
        }
      ],
      changeWayData: {
        checkbox: ["4"],
        userId: ""
      },
      rules: {
        checkbox: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // this.startRmarkTime = format("yyyy-MM-dd", new Date()) + " 00:00:00";
      // this.endRmarkTime = format("yyyy-MM-dd", new Date()) + " 23:59:59";
      this.getAllNewEquipment();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllNewEquipment();
    },
    formatterTime(row) {
      if (row.bandingTime) {
        return format("yyyy-MM-dd hh:mm:ss", new Date(row.bandingTime));
      } else {
        return "";
      }
    },
    goMemo(data) {
      const { href } = this.$router.resolve({
        path: "/userManage/userList/userMemo",
        query: { t: +new Date(), type: 1, userId: data.userId }
      });
      window.open(href, "_blank");
    },
    openChangeWay(e) {
      const newCheck = e.communicateWay.split(",");
      if (newCheck[0] === "0") {
        this.changeWayData.checkbox = [];
        this.changeWayData.checkbox.push("4");
      } else {
        this.changeWayData.checkbox = newCheck;
      }
      this.dialogChangeWay = true;
      this.changeWayData.userId = e.userId;
    },
    doChangeWay(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getUserCommunicate();
        } else {
          return false;
        }
      });
    },
    changeHandleAction(data) {
      this.$confirm("是否修改", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.getHandleAction(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getAllNewEquipment();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    async getHandleAction(data) {
      await fetchHandleAction({
        id: data.id
      });
      this.getAllNewEquipment();
      this.$message({
        type: "success",
        message: "修改成功!"
      });
    },
    async getUserCommunicate() {
      await fetchUserCommunicate({
        userId: this.changeWayData.userId,
        communicateId: this.changeWayData.checkbox.toString()
      });
      this.$message({
        type: "success",
        message: "修改成功!"
      });
      this.dialogChangeWay = false;
      this.getAllNewEquipment();
    },
    async getAllNewEquipment() {
      this.tableloading = true;
      const allNew = await fetchAllNewEquipment({
        startTime: this.startRmarkTime,
        endTime: this.endRmarkTime,
        pageSize: this.limit,
        pageNo: this.currentPage
      });
      this.newEquipmentData = [];
      this.tableloading = false;
      if (allNew.data.list !== undefined) {
        this.count = allNew.data.total;
        allNew.data.list.forEach(item => {
          const all = {};
          all.bandingTime = item.bandingTime;
          all.hardwareEquipment = item.hardwareEquipment;
          all.userId = item.userId;
          all.id = item.id;
          all.userName = item.userName;
          all.nickName = item.nickName;
          all.communicateWay = item.communicateWay;
          all.handleAction = item.handleAction;
          this.newEquipmentData.push(all);
        });
      }
    }
  }
};
</script>
